<template lang="html">
  <section class="wrapper">
    <div class="ios-icon ios-icon-health">
      <div class="heart">
        <div class="heart-left"></div>
        <div class="heart-right"></div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
$icon-size: 180px !default;

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  height: 300px;
  background: #111;
}
.ios-icon {
  width: $icon-size;
  height: $icon-size;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  top: 50%;
  overflow: hidden;
  border-radius: 21.67%;
  transform: translateY(-50%);
}
.ios-icon-health {
  .heart {
    height: 40.5% / 100% * $icon-size;
    width: 46.5% / 100% * $icon-size;
    position: absolute;
    top: 16.5%;
    right: 15.3%;
    .heart-left,
    .heart-right {
      width: 50%;
      height: 100%;
      float: left;
      overflow: hidden;
      position: relative;
      &:before,
      &:after {
        content: "";
        display: block;
      }
      &:before {
        width: 25.6% / 100% * $icon-size;
        height: 25.6% / 100% * $icon-size;
        background-image: linear-gradient(to bottom, #ff51a2, #ff3f72 50%);
        border-radius: 50%;
      }
      &:after {
        width: 62.8% / 100% * $icon-size;
        height: 36.8% / 100% * $icon-size;
        background-image: linear-gradient(to bottom, #ff3f72, #ff1708 75%);
        position: absolute;
        top: 30%;
      }
    }
    .heart-left {
      &:after {
        border-radius: 0 0 0 100% / 0 0 0 100%;
      }
    }
    .heart-right {
      &:before {
        position: absolute;
        right: 0;
      }
      &:after {
        border-radius: 0 0 100% 0 / 0 0 100% 0;
        right: 0;
      }
    }
  }
}
</style>
